<template>
  <div id="goodsInfoCart">
    <el-row :gutter="12">
      <el-col v-for="item in props.data" :key="item.id" :span="props.span">
        <div
          class="goods-info"
          @click="toView(item.id)"
          @contextmenu="
            useContextMenu($event, getMenuItem(item.id), props.showMenu)
          "
        >
          <el-image
            :src="item.mainImages"
            style="border-radius: 10px"
            loading="lazy"
          >
            <template #placeholder>
              <div class="image-slot">正在加载中。。。</div>
            </template>
          </el-image>
          <div>
            <div>
              <el-text :line-clamp="2" v-html="item.goodsName" />
            </div>
            <div>
              <el-space>
                <el-text size="small" type="danger"
                  >到手￥
                  <el-text size="large" type="danger"
                    >{{ item.price }}
                  </el-text>
                </el-text>
                <el-text size="small">已售 {{ item.saleNum || 0 }}</el-text>
              </el-space>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
import { GoodsEsDto } from "@/api";
import { useRouter } from "vue-router";
import useContextMenu from "@/components/chat/useContextMenu";

const props = defineProps({
  data: {
    type: Array<GoodsEsDto>,
    default: [],
  },
  span: {
    type: Number,
    default: 4,
  },
  showMenu: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["select-id"]);

function getMenuItem(id: any) {
  return [
    {
      label: "删除",
      onClick: () => emit("select-id", id),
    },
  ];
}

//跳转路由
const router = useRouter();

function toView(id: number) {
  router.push("/goods_detail/" + id);
}
</script>

<style lang="scss" scoped>
#goodsInfoCart {
  width: 100%;
  margin-top: 20px;

  .goods-info {
    padding: 3px;
    margin-bottom: 15px;

    &:hover {
      border: #409eff solid 1px;
      color: #409eff !important;
      transform: scale(1.1, 1.1);
      transform-origin: center center;
    }

    @keyframes boxShadowOffset3 {
      0% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
      }
      25% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
      }
      50% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
      }
      75% {
        box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
      }
      100% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
      }
    }

    .image-slot {
      position: relative;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      color: #409eff;
      -webkit-animation: boxShadowOffset3 2s linear infinite;
      animation: boxShadowOffset3 2s linear infinite;
    }
  }
}
</style>
